<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>君地集团 - 爱吉多 - 证书</title>
    <% include ../../common/common-resource.ejs %>
    <script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
    <script src="/javascripts/manage/fruit.js"></script>
</head>
<body>
<div class="container-fluid" id='fruit-container'>
    <div class="row">
        <div class="col-md-12">
            <ul class="breadcrumb">
                <li>
                    <a href="#">君地</a>
                </li>
                <li>
                    <a href="#">后台管理</a>
                </li>
                <li class="active">
                    爱吉多-证书配置页面
                </li>
            </ul>
            <ul class="nav nav-tabs">
                <li>
                    <a href="#">证书配置</a>
                </li>
                <li class="active">
                    <a href="#">【四季水果】配置</a>
                </li>
                <li>
                    <a href="#">商品配置</a>
                </li>
                <li>
                    <a href="#">水果配置</a>
                </li>
                <li>
                    <a href="#">首页配置</a>
                </li>
            </ul>
            <div class="page-header">
                <h1>
                    配置【水果】!
                    <small>增加、修改、删除、禁用[水果]！</small>
                </h1>
                <button class="btn btn-success" @click='onAddCertificationClick'>添加水果</button>
            </div>
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>水果名字-中文</th>
                    <th>水果名字-英文</th>
                    <th>水果名字-西班牙文</th>
                    <th>更新时间</th>
                    <th>是否可用</th>
                    <th>简介 - 中文</th>
                    <th>简介 - 英文</th>
                    <th>简介 - 西班牙文</th>
                    <th>图片链接</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <% fruits.forEach(function (fruit) { %>
                <tr :class='{danger: <%=fruit.id%> == editingItem.id}'>
                    <td><%= fruit.id %></td>
                    <td><%= fruit.cnName%></td>
                    <td><%= fruit.enName %></td>
                    <td><%= fruit.spaName %></td>
                    <td><%= fruit.updateTime %></td>
                    <td><%= fruit.status == 1 ? "是" : "否"%></td>
                    <td><%= fruit.cnBrief %></td>
                    <td><%= fruit.enBrief %></td>
                    <td><%= fruit.spaBrief %></td>
                    <td><%= fruit.imageUrl %></td>
                    <td>
                        <button class="btn btn-xs btn-primary" @click='onEditClick("<%= fruit.id %>")'>编辑</button>
                        <button class="btn btn-xs btn-danger" @click='onDeleteClick("<%= fruit.id %>")'>删除</button>
                    </td>
                </tr>
                <% }) %>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row" v-if='isFormShow'>
        <div class="col-md-12">
            <form role="form" autocomplete='off' @submit.prevent ref='fruit-form' method='post' action='/manage/aijiduo/postFruit' enctype="multipart/form-data">
                <input type="hidden" name='id' v-model='editingItem.id'>
                <div class="form-group">
                    <label for="fruit-name-cn">
                        水果名字 - 中文
                    </label>
                    <input type="text" class="form-control" id="fruit-name-cn" v-model='editingItem.cnName' name='cnName'/>
                </div>
                <div class="form-group">

                    <label for="fruit-name-en">
                        水果名字 - 英文
                    </label>
                    <input type="text" class="form-control" id="fruit-name-en" v-model='editingItem.enName' name='enName'/>
                </div>
                <div class="form-group">
                    <label for="fruit-name-spa">
                        水果名字 - 西班牙文
                    </label>
                    <input type="text" class="form-control" id="fruit-name-spa" v-model='editingItem.spaName' name='spaName'/>
                </div>
                <div class="form-group">
                    <label for="fruit-brief-cn">
                        水果简介 - 中文
                    </label>
                    <textarea type="text" class="form-control" id="fruit-brief-cn" v-model='editingItem.cnBrief' name='cnBrief'></textarea>
                </div>
                <div class="form-group">
                    <label for="fruit-name-en">
                        水果简介 - 英文
                    </label>
                    <textarea type="text" class="form-control" id="fruit-brief-en" v-model='editingItem.enBrief' name='enBrief'></textarea>
                </div>
                <div class="form-group">
                    <label for="fruit-brief-spa">
                        水果简介 - 西班牙文
                    </label>
                    <textarea type="text" class="form-control" id="fruit-brief-spa" v-model='editingItem.spaBrief' name='spaBrief'></textarea>
                </div>
                <div class="form-group">
                    <label for="fruit-image">
                        上传水果图片
                    </label>
                    <input type="file" id="fruit-image" name='fruitPicture'/>
                    <p class="help-block">
                        图片最好是【220*320】要不然， 在页面上显示会惨不忍睹
                    </p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" v-model='editingItem.status' name='status' :value='editingItem.status'/> 是否可用
                    </label>
                </div>
                <button class="btn btn-success" @click='onSubmitClick' :disabled='isSubmitEnabled'>
                    提交
                </button>
            </form>
        </div>
        <div class="col-md-12" style='margin-top: 50px;'>
            <img alt="Bootstrap Image Preview" :src="editingItem.imageUrl" />
            <dl>
                <dt>
                    Description lists
                </dt>
                <dd>
                    A description list is perfect for defining terms.
                </dd>
                <dt>
                    Euismod
                </dt>
                <dd>
                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                </dd>
                <dd>
                    Donec id elit non mi porta gravida at eget metus.
                </dd>
                <dt>
                    Malesuada porta
                </dt>
                <dd>
                    Etiam porta sem malesuada magna mollis euismod.
                </dd>
                <dt>
                    Felis euismod semper eget lacinia
                </dt>
                <dd>
                    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
                </dd>
            </dl>
        </div>
    </div>
</div>
</body>
</html>
